<template>
  <p>
    <button @click="list()" class="btn btn-white btn-default btn-round">
      <i class="ace-icon fa fa-refresh"></i>
      刷新
    </button>
  </p>
  <Pagination ref="pagination" :list="list"></Pagination>
  <table id="simple-table" class="table  table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>相对路径</th>
        <th>文件名</th>
        <th>后缀</th>
        <th>大小</th>
        <th>用途</th>
      </tr>
    </thead>
    <tbody>
    <tr v-for="file in files">
        <td>{{ file.id }} </td>
        <td>{{ file.path }} </td>
        <td>{{ file.name }} </td>
        <td>{{ file.suffix }} </td>
        <td>{{ $filter.formatFileSize(file.size) }} </td>
        <td>{{ $filter.optionKVArray($Enums.FILE_USE_ARRAY, file.use)  }} </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
import Pagination from "@/components/pagination";

export default {
  components: {Pagination},
  name: "file",
  data() {
    return {
      file: {},
      files: []
    }
  },
  props: {
    'activeSidebar': {
      type: Function
    }
  },
  mounted() {
    let _this = this;
    // this.activeSidebar("business-file-sidebar")
    _this.list(1);
  },
  methods: {
    list(page) {
      Loading.show();
      let _this = this;
      _this.$post(process.env.VUE_APP_SERVER + "/file/admin/file/list", {
        page: page,
        size: _this.$refs.pagination.size
      }).then(res => {
        Loading.hide();
        console.log(res);
        let content = res.content;
        _this.files = content.list;
        _this.$refs.pagination.render(page, content.total);
      }).catch(res => {
        console.log(res);
      });
    },
    edit(file) {
      let _this = this;
      _this.file = $.extend({}, file);
      $("#form-modal").modal('show');
    }
  }
}
</script>

<style scoped>

</style>